<!--  -->
<template>
  <div class="wrapper" style="display: flex; flex-wrap: nowrap">
    <div class="leftContainner" @click="parentClick" ref="leftContainner">
      <div @click="toBasics"><i class="iconfont icon-shezhi"></i> 基础设置</div>
      <div @click="toData"><i class="iconfont icon-zhibo-"></i> 数据源</div>
      <div @click="toAudio"><i class="iconfont icon-yinpin"></i> 音频</div>
      <div @click="toSong"><i class="iconfont icon-yinle"></i> 点歌</div>
    </div>
    <div class="routerView">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    parentClick(e) {
      let childrenNode = this.$refs.leftContainner.children;
      for (let i = 0; i < childrenNode.length; i++) {
        childrenNode[i].style.color = "";
      }
      e.target.style.color = "skyblue";
    },
    toBasics() {
      this.$router.push("basics-setting");
    },
    toData() {
      this.$router.push("data-resource");
    },
    toAudio() {
      this.$router.push("audio-setting");
    },
    toSong() {
      this.$router.push("song-setting");
    },
  },
};
</script>
<style lang='css' scoped>
.leftContainner {
  height: 215px;
  flex: 1;
  border-right: 1px solid rgba(238, 238, 238, 0.281);
  padding: 0 20px;
}
.leftContainner div {
  text-align: left;
  margin-top: 20px;
  color: rgba(238, 238, 238, 0.788);
  cursor: pointer;
  white-space: nowrap;
}
.routerView {
  flex: 9;
}
</style>